<template>
    <div class="contentArea">
        <a-select
            ref="select"
            style="width: 120px"
            v-model:value="selectOption"
            @change="optionChange"
        >
            <a-select-option
                :value="item.value"
                v-for="item in selectOptions"
                :key="item.id"
                >{{ item.name }}
            </a-select-option>
        </a-select>
        <a-button
            class="headerButton"
            @click="showModal = true"
            >添加{{ getOption()?.name }}
        </a-button>
    </div>

    <!-- 表格 -->
    <div style="padding: 0 20px">
        <a-table
            :columns="todoTaskColumns"
            :data-source="dataList"
            :pagination="pagination"
        >
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'operation'">
                    <a
                        class="tableAction"
                        @click="editRecordFun(record)"
                        style="margin-right: 10px"
                        >编辑</a
                    >
                    <a
                        class="tableAction"
                        @click="deleteRecordFun(record)"
                        >删除</a
                    >
                </template>
                <template v-if="column.key === 'name'">
                    <a class="tableAction">{{ record.name }}</a>
                </template>
            </template>
        </a-table>
    </div>
    <!-- 模态框 -->
    <a-modal
        v-model:open="showModal"
        :title="editRecord ? '编辑' : '添加'"
        width="600px"
        :footer="null"
        destroyOnClose
    >
        <TaskModal
            :editRecord="editRecord"
            v-model="showModal"
        />
    </a-modal>
</template>

<script setup lang="ts">
    import usePagination from '@/hooks/usePagination'
    import { todoTaskColumns } from './columns'
    import { createVNode, onMounted, ref, watch } from 'vue'
    import { message, Modal } from 'ant-design-vue'
    import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
    import TaskModal from './TaskModal.vue'
    import { useSearchStore } from '@/store/search'
    import { storeToRefs } from 'pinia'
    import { deleteTodoTaskReq, getTodoTaskListReq } from '@/api/todoTask'
    const { pagination } = usePagination()

    const searchStore = useSearchStore()
    const { searchValue } = storeToRefs(searchStore)

    const dataList = ref([])

    const getDataList = async () => {
        const res = await getTodoTaskListReq({})
        if (res?.data?.length) {
            dataList.value = res.data
        } else {
            dataList.value = []
        }
    }

    const showModal = ref(false)
    const editRecord = ref(null)

    const selectOptions = [{ id: 1001, name: '任务', value: 'todoTask' }]
    const selectOption = ref('todoTask')

    // 选择
    const optionChange = (value: string) => {
        selectOption.value = value
    }

    const getOption = () => {
        return selectOptions.find((item) => item.value === selectOption.value)
    }

    // 添加成功后更新数据
    watch(showModal, (val, oldVal) => {
        if (oldVal && !val) {
            editRecord.value = null
            getDataList()
        }
    })
    const editRecordFun = (record: any) => {
        if (record) {
            editRecord.value = record
            showModal.value = true
        }
    }

    watch(searchValue, () => {
        if (searchValue.value) {
            dataList.value = dataList.value?.filter((item: any) =>
                item.name?.includes(searchValue.value)
            )
        } else {
            getDataList()
        }
    })

    const deleteRecordFun = (record: any) => {
        Modal.confirm({
            title: `确认删除 "${record.name || record.id}" 吗？`,
            icon: createVNode(ExclamationCircleOutlined),
            content: '如果确认删除请点击确认按钮',
            async onOk() {
                try {
                    const res = await deleteTodoTaskReq({
                        id: record.id,
                    })
                    if (res) {
                        message.success('删除成功')
                        getDataList()
                    }
                } catch (error) {
                    message.error('删除失败')
                }
            },
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            onCancel() {},
        })
    }

    onMounted(() => {
        getDataList()
    })
</script>

<style scoped lang="less">
    .contentArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;

        .headerButton {
            background-color: var(--color-blue);
            color: white;
            font-size: 12px;
        }
    }
</style>
